<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script >		
			/*
				9种
				基本选择器 层叠 过滤
			
				基本选择器
					#id elemrnt .class * 匹配所有 selector
				内容过滤
				可见性选择器
				属性过滤选择器
				子元素过滤选择器
				表单过滤选择器
				表单对象过滤选择器
				
			
			
			*/
		   
			$(function(){
				// id选择器
				var d1 = $("#d1");
				// alert(d1.text()); // 所有文本
				// alert(d1.html()); //所有文本含有标签
				
				// // 类标签 返回数组 遍历
				// // this 是dome对象
				// $(".c1").each(function(i){
				//    alert(i);
				//  });
				
				
				// //
				// var index = $("div").index($("#d1"));
				// alert(index);
				
				// 多种选择器
				// $(".c1, #d1").html("Java");
				
				
				// 层叠选择器
				// 1. 空格	元素下所有子元素
				// 2. >	元素下直接子元素
				// 3。+ 匹配直接兄弟元素(1)
				// 4. ~ 元素后面的所有兄弟元素个（所有）
				
				//1.获取id=p所有子元素
				var size = $("#p a").size();
				// alert(size);
				//2.获取id=p直接子元素
				size = $("#p >a").size();
				// alert(size);
				
				//3.获取id=p第1个兄弟元素  没有返回undifine
				var html = $("#p1+ a").html();
				// alert(html);
				//4.获取id=p所有兄弟元素
				size = $("#p1~ a").size();
				// alert(size);
				
				// 5.将p下所有a标签设置为红色
				var a = $("#p a");
				a.css({"color":"red"});
				
				
				//过滤器 在基本和层次选择器中过滤  除了属性，都是：开头 
				
				
				
				
				
				
				
				
				
				
			});
			
		</script>
		
		
	</head>
	<body>
			<div id="d1">今天天气<a>好晴朗</a>d1</div>
			
			<div class="c1">今天天气好晴朗c1</div>
			<div class="c1">今天天气好晴朗c2</div>
			
			<div>今天天气好晴朗d</div>
			<div>今天天气好晴朗d2</div>
			
			<div id= "p">
				<p id="p1">今天天气<a style="font-size: 16px; color: #0000FF;">好晴朗</a></p>
				<a href="#">点击</a>
				<a href="#">点击</a>
			</div>
			
			
	</body>
</html>
